<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import { getRbacRoleListApi } from "@/api/user";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "新增",
			typeOption: null
		})
	});


	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });

	const roleOption = ref([])
	const getRbacRoleList = async() => {
		const res = await getRbacRoleListApi({page: 1, perPage: 9999});
		if(res?.code ===200) {
			roleOption.value = res.result.list
		}
	}
	onMounted(()=> {
		getRbacRoleList()
	})
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="报警名称" prop="name">
					<el-input v-model="newFormInline.name" clearable placeholder="请输入报警名称" :maxlength="30"/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="报警编码" prop="code">
					<el-input v-model="newFormInline.code" clearable placeholder="请输入报警编码" :maxlength="30"/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="报警类型" prop="type">
					<el-select v-model="newFormInline.type" placeholder="请选择报警类型">
						<el-option v-for="item in newFormInline.typeOption" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="时间间隔(秒)" prop="interval">
					<el-input-number v-model="newFormInline.interval" :min="1" :precision="0" />
				</el-form-item>
			</re-col>
			<re-col :value="24" :xs="24" :sm="24">
				<el-form-item label="推送角色" prop="roleList">
					<el-select v-model="newFormInline.roleList" multiple placeholder="请选择推送角色">
						<el-option v-for="item in roleOption" :key="item.roleId" :label="item.name" :value="item.roleId" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="24" :xs="24" :sm="24">
				<el-form-item label="报警类型描述">
					<el-input v-model="newFormInline.describe" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
						placeholder="请输入报警类型描述" :maxlength="100" show-word-limit />
				</el-form-item>
			</re-col>

		</el-row>
	</el-form>
</template>
<style scoped></style>